<template>
    <div style="padding-left: 100px;padding-top:30px">

        <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="标题" prop="payTitle">
                <el-input v-model="form.payTitle" />
            </el-form-item>
            <el-form-item label="付款金额" prop="paymentAmount">
                <el-input v-model="form.paymentAmount" />
            </el-form-item>
            <el-form-item label="付款方式" prop="payType">
                <el-radio-group v-model="form.payType">
                    <el-radio value="微信支付">微信支付</el-radio>
                    <el-radio value="支付宝支付">支付宝支付</el-radio>
                    <el-radio value="银联支付">银联支付</el-radio>
                    <el-radio value="企业转账">企业转账</el-radio>
                    <el-radio value="线下支付">线下支付</el-radio>
                    <el-radio value="其他">其他</el-radio>
                </el-radio-group>
                <el-input v-if="form.payType === '其他'" v-model="otherPayType" placeholder="请输入其他支付方式" />
            </el-form-item>
            <el-form-item label="支付对象" prop="payment">
                <el-input v-model="form.payment" />
            </el-form-item>
            <el-form-item label="开户行" prop="openingBank">
                <el-input v-model="form.openingBank" />
            </el-form-item>
            <el-form-item label="银行账户" prop="bankAccount">
                <el-input v-model="form.bankAccount" />
            </el-form-item>
            <el-form-item label="付款日期" prop="payDate">
                <el-date-picker v-model="form.payDate" type="date" placeholder="请选择付款日期" clearable
                    style="width: 531px;" />
            </el-form-item>
            <el-form-item label="用途描述" prop="purposeDescription">
                <el-input v-model="form.purposeDescription" type="textarea" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" />
            </el-form-item>

            <el-form-item label="附件" prop="ticketAttachments">
                <el-upload class="avatar-uploader" action="http://47.93.37.127:8000/setpath/api/PayManage/UploadFile"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="form.ticketAttachments" :src="form.ticketAttachments" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item label=" ">
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交审批</el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                <el-button type="primary" @click="onSubmit(ruleFormRef)">保存草稿</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import axios from '../../../api/http'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
const route = useRoute()

// do not use same name with ref
//添加表单
const otherPayType = ref()
const form = reactive({
    payTitle: "",
    paymentAmount: null,
    payType: "",
    payment: "",
    openingBank: "",
    bankAccount: "",
    proposer: "",
    payDate: "",
    purposeDescription: "",
    remark: "",
    ticketAttachments: "",
    approver: "",
    isDel: 0,
    auditStatus: 1,
    createName: "",
    createTime: "",
    updateName: "",
    updateTime: ""
})
//上传
const handleAvatarSuccess = (url: string) => {
    form.ticketAttachments = "http://47.93.37.127:8885" + url
    console.log(form.ticketAttachments)
}
const beforeAvatarUpload = (rawFile: any) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
        ElMessage.error('只能上传的文件格式：jpg、png、gif!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
    }
    return true
}
//表单校验
const rules = reactive<FormRules>({
    payTitle: [
        { required: true, message: '请输入付款标题', trigger: 'blur' },
    ]
    , paymentAmount: [
        { required: true, message: '请输入付款金额', trigger: 'blur' },
    ]
    , payType: [
        { required: true, message: '请选择付款方式', trigger: 'blur' },
    ],
    payment: [
        { required: true, message: '请输入付款人', trigger: 'blur' },
    ]
    , openingBank: [
        { required: true, message: '请输入开户行', trigger: 'blur' },
    ]
    , bankAccount: [
        { required: true, message: '请输入银行账号', trigger: 'blur' },
    ]
    , payTime: [
        { required: true, message: '请选择付款时间', trigger: 'blur' },
    ]
    , ticketAttachments: [
        { required: true, message: '请上传票据附件', trigger: 'blur' },
    ]
    , remark: [
        { required: true, message: '请输入备注', trigger: 'blur' },
    ]
})
//提交审批
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(form)
            form.auditStatus = 2 //待审批
            form.payType = otherPayType.value
            axios.post('/setpath/api/PayManage/AddPayManage', form).then(res => {
                console.log(res)
                if (res > 0) {
                    ElMessage.success('保存成功')
                    router.push({
                        path: '/paymanageList'
                    })
                }
                else {
                    ElMessage.error('保存失败')
                }
            }).catch(err => {
                console.log(err)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
//保存草稿
const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(form)
            form.auditStatus = 1 //待提交
            form.payType = otherPayType.value
            axios.post('/setpath/api/PayManage/AddPayManage', form).then(res => {
                console.log(res)
                if (res > 0) {
                    ElMessage.success('保存成功')
                    router.push({
                        path: '/paymanageList'
                    })
                }
                else {
                    ElMessage.error('保存失败')
                }
            }).catch(err => {
                console.log(err)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    router.push({
        path: '/paymanageList'
    })
}


//钩子函数
onMounted(() => {

})
</script>

<style scoped>
.avatar-uploader .avatar {
    max-width: 178px;
    max-height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>